<template>
  <div class="x-vip-buy" v-show='xBuy'>
    <div class="vipBuys">
      <div class="topVipArea" @click="gomall">
        <div class="btnImage"><img src="~/static/images/btn.png" alt=""></div>
      </div>
      <div class="closeBtn" @click='handleCancel'>
        <img src="~/static/images/buyVip_close.png" alt="">
      </div>
    </div>
  </div>  
</template>

<script>
export default {
  props: {
    returnUrl: String,
    xBuy: Boolean,
    serverName: String
  },
  methods: {
    handleCancel() {
      this.$emit('handleCloseBuyDialog')
    },
    gomall(){
    
      // let return_url = process.env.workUrl+'/h5-stu-wx/#/evaluation/ad'
      let return_url = process.env.workUrl + this.returnUrl
      let uri = process.env.mallUrl + '/profile/vip?origin=' + this.serverName
      if (this.commonJs.checkTerminal() === "ios") {
        let obj = {
          gourl: uri,
          pay_return_url: return_url
        };
        window.webkit.messageHandlers.goZyMal.postMessage(obj);
      } else {
        window.location.href = uri;
      }

    },
  }
}
</script>

<style lang="less" scoped>
.x-vip-buy {
  position: fixed;
  width: 7.5rem;
  height: 100vh;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 4;

  .vipBuys {
    width: 5.73rem;
    height: auto;
    border-radius: 0.1rem;
    margin: 2.98rem auto 0;
    overflow: hidden;
    .topVipArea {
      width: 100%;
      height: 5.5rem;
      background: url('~/static/images/pic.png') no-repeat 100% 100%;
      background-size: 100% 100%;
      position: relative;
      padding-top: 3.86rem;
      .btnImage {
        width: 100%;
        height: 1.64rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .closeBtn {
      margin: 0.56rem auto 0;
      width: 0.8rem;
      height: 0.8rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
